<template>
  <view class="platform-test">
    <view class="section">
      <view class="section-title">平台信息</view>
      <view class="info-item">
        <text class="label">当前平台:</text>
        <text class="value">{{ platformInfo.platform }}</text>
      </view>
      <view class="info-item">
        <text class="label">Vue版本:</text>
        <text class="value">{{ platformInfo.vueVersion }}</text>
      </view>
      <view class="info-item">
        <text class="label">是否小程序:</text>
        <text class="value">{{ platformInfo.isMp ? '是' : '否' }}</text>
      </view>
    </view>

    <view class="section">
      <view class="section-title">样式测试</view>
      <view class="style-demo" :style="buttonStyle"></view>
    </view>

    <view class="section">
      <view class="section-title">UI组件测试</view>
      <view class="component-container">
        <component :is="loginButton.type" v-bind="loginButton.props"></component>
      </view>
    </view>

    <view class="section">
      <view class="section-title">API功能测试</view>
      <button @click="handleShare" class="share-button">分享内容</button>
      <text class="share-result">{{ shareResult }}</text>
    </view>
  </view>
</template>

<script>
import { PlatformChain, Platform } from 'uni-platform-chain';

export default {
  name: 'PlatformTest',
  data() {
    return {
      shareResult: '',
      platformInfo: {
        platform: Platform.getPlatform(),
        vueVersion: Platform.getVueVersion(),
        isMp: Platform.isMp()
      },
      buttonStyle: this.getButtonStyle(),
      loginButton: this.getLoginButton()
    };
  },
  methods: {
    // 示例1: 根据平台获取不同的样式
    getButtonStyle() {
      return PlatformChain.with(() => ({
        // 默认样式
        backgroundColor: '#999999',
        color: '#ffffff',
        fontSize: '14px',
        padding: '5px 10px',
        borderRadius: '4px',
        width: '200px',
        height: '40px',
        textAlign: 'center',
        lineHeight: '40px'
      }))
      .web(() => ({
        // H5平台样式
        backgroundColor: '#2979ff',
        color: '#ffffff',
        fontSize: '16px',
        padding: '8px 16px',
        borderRadius: '4px',
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
        width: '200px',
        height: '40px',
        textAlign: 'center',
        lineHeight: '40px',
        transition: 'all 0.3s ease'
      }))
      .mpWeixin(() => ({
        // 微信小程序样式
        backgroundColor: '#07c160',
        color: '#ffffff',
        fontSize: '32rpx',
        padding: '16rpx 32rpx',
        borderRadius: '8rpx',
        width: '400rpx',
        height: '80rpx',
        textAlign: 'center',
        lineHeight: '80rpx'
      }))
      .app(() => ({
        // App样式
        backgroundColor: '#ff5a5f',
        color: '#ffffff',
        fontSize: '18px',
        padding: '10px 20px',
        borderRadius: '6px',
        width: '220px',
        height: '44px',
        textAlign: 'center',
        lineHeight: '44px'
      }))
      .exe();
    },

    // 示例2: 平台特定的分享实现
    handleShare() {
      const result = PlatformChain.with(() => {
        // 默认实现
        this.shareResult = '当前平台不支持分享功能';
        return false;
      })
      .web(() => {
        // Web平台分享实现
        if (navigator && navigator.share) {
          navigator.share({
            title: '测试分享',
            text: '这是一个测试分享内容',
            url: window.location.href
          }).then(() => {
            this.shareResult = 'Web分享成功';
          }).catch((err) => {
            this.shareResult = 'Web分享失败: ' + err;
          });
          return true;
        } else {
          this.shareResult = 'Web浏览器不支持分享API';
          return false;
        }
      })
      .mpWeixin(() => {
        // 微信小程序分享实现
        uni.showShareMenu({
          withShareTicket: true,
          menus: ['shareAppMessage', 'shareTimeline']
        });
        this.shareResult = '已显示微信小程序分享菜单';
        return true;
      })
      .app(() => {
        // App分享实现
        uni.share({
          provider: 'weixin',
          scene: 'WXSceneSession',
          type: 0,
          title: '测试分享',
          summary: '这是一个测试分享内容',
          imageUrl: '/static/logo.png',
          success: () => {
            this.shareResult = 'App分享成功';
          },
          fail: () => {
            this.shareResult = 'App分享失败';
          }
        });
        return true;
      })
      .exe();

      if (!result) {
        console.log('分享功能不可用');
      }
    },

    // 示例3: 平台特定的登录按钮
    getLoginButton() {
      return PlatformChain.with(() => {
        // 默认登录按钮
        return {
          type: 'button',
          props: {
            size: 'default',
            type: 'default',
            plain: false,
            text: '登录',
            onClick: () => {
              uni.showToast({
                title: '默认登录',
                icon: 'none'
              });
            }
          }
        };
      })
      .web(() => {
        // Web平台登录按钮
        return {
          type: 'button',
          props: {
            size: 'default',
            type: 'primary',
            plain: false,
            class: 'web-login-btn',
            text: 'Web登录',
            onClick: () => {
              uni.showToast({
                title: 'Web登录点击',
                icon: 'none'
              });
            }
          }
        };
      })
      .mpWeixin(() => {
        // 微信小程序登录按钮
        return {
          type: 'button',
          props: {
            size: 'default',
            type: 'primary',
            plain: false,
            openType: 'getUserInfo',
            text: '微信登录',
            onGetUserInfo: (e) => {
              uni.showToast({
                title: '微信登录: ' + (e.detail.userInfo ? '成功' : '失败'),
                icon: 'none'
              });
            }
          }
        };
      })
      .app(() => {
        // App登录按钮
        return {
          type: 'button',
          props: {
            size: 'default',
            type: 'primary',
            plain: false,
            text: 'App登录',
            onClick: () => {
              uni.showToast({
                title: 'App登录点击',
                icon: 'none'
              });
            }
          }
        };
      })
      .exe();
    }
  }
};
</script>

<style scoped>
.platform-test {
  padding: 20rpx;
}

.section {
  margin-bottom: 40rpx;
  padding: 20rpx;
  border-radius: 8rpx;
  background-color: #f8f8f8;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.info-item {
  display: flex;
  margin-bottom: 10rpx;
}

.label {
  color: #666;
  width: 200rpx;
}

.value {
  font-weight: bold;
  color: #333;
}

.style-demo {
  margin: 20rpx auto;
  border: 1px solid #ddd;
}

.component-container {
  margin: 20rpx 0;
}

.share-button {
  margin: 20rpx 0;
}

.share-result {
  font-size: 28rpx;
  color: #666;
  margin-top: 10rpx;
}
</style>
